<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="控制台输出vue实例" @click="printVm()"><br>
        <!-- 
            v-on 事件绑定的取值：Function | Inline Statement | Array | Object
                Function ：来自于当前容器对应vue实例的 methods 方法仓库的自定义方法
                Inline Statement ：可以直接省略方法定义，将方法主体的表达式（遵循js语法）列表直接定义与方法取值中
                                   建议：在实际程序开发时，建议只对一个表达式的执行体进行行内转换
                Array : 为同一个事件同时绑定多个回调函数
                Object : 在一个标签上一次性绑定多个事件的回调函数
         -->
        <input type="button" value="callback" @click="showTip()"><br>
        <p>msg：{{ msg }}</p>
        <p>info：{{ info }}</p>
        <input type="button" value="修改msg 和 info 变量值" @click=" msg='新msg变量';info='新info变量' "><br>
        <hr>
        <!-- 
            当方法以匿名函数方式定义与 数据仓库中时：
                this 会依据运行环境改变this指向，在浏览器环境下 this 为 window
        -->
        <input type="button" value="通过取值数据仓库中的数组变量定义多个回调" @click=" callbackFun "><br><br>
        <!--
            当取值为匿名数组 指定方法仓库 methods 方法时，为保证事件触发时方法能够执行，必须为方法定义()
            多回调的执行顺序取决函数的定义顺序
        -->
        <input type="button" value="通过取值匿名数组方式定义多个回调" 
            @click=" [ printFunA(),printFunB() ] "
        ><br><br>
        <input type="button" value="通过取值匿名数组方式定义多个回调" 
            @click=" [ printFunB(),printFunA() ] "
        ><br><br>
        <input type="button" value="通过取值匿名数组方式定义多个回调" 
            @click=" printMain() "
        >
        <hr>
        <input type="button" value="绑定多个事件" @click="printFunA()" @mousedown="printFunB()"><br><br>
        <!-- 
            取值为匿名对象时，对象中key 用于描述事件名，value用于指定回调函数（vue实例的方法仓库中的自定义方法）
            因为匿名对象定义属性描述事件，所以取值必须为一个可以执行的方法主体，所有在定义回调时不能增加 （）
            + 所以v-on完成对象事件取值时，无法直接进行页面形参定义
                - 如果需要进行方法参数传入，可以将value定义为 匿名函数，但函数主体只能完成vue实例方法仓库的方法调用
            + 取值对象方式时，事件绑定不支持 简写语法 @ ，因为是多事件的同时绑定，所以不支持参数,同时不支持修饰符
        -->
        <input type="button" value="绑定多个事件" 
            v-on=" {
                click:printFunA,
                mousedown:printFunB,
            } "
        ><br><br>
        <input type="button" value="绑定多个事件" 
            v-on=" {
                click:printFunA,
                mousedown:function(){
                    printArg('字符串',1234,true,[1,2,3]);
                },
            } "
        ><br><br>
        <!-- <input type="button" value="绑定多个事件" 
            @=" {
                click:printFunA,
                mousedown:function(){
                    printArg('字符串',1234,true,[1,2,3]);
                },
            } "
        ><br><br> -->
        <!-- <input type="button" value="绑定多个事件" 
            v-on:click=" {
                click:printFunA,
                mousedown:function(){
                    printArg('字符串',1234,true,[1,2,3]);
                },
            } "
        ><br><br> -->
    </div>
</body>
<script>
    // var a;
    // var b;
    // a = 1;b = 2

    function show(){}
    let a = show;
    let b = show();


    // 方法仓库的方法名和数据仓库的变量名不能重复
    var vm = new Vue({
        el: "#app",
        data:{
            msg:"msg变量",
            info:"info变量",
            callbackFun:[
                function(){
                    console.log("data-callbackFun-fun1",this);
                },
                function(){
                    console.log("data-callbackFun-fun2");
                }
            ]
        },
        // vue 实例构建时，会将methods仓库中的自定义方法，直接作为构成实例的 实例方法进行定义
        methods:{
            // msg(){},
            printVm(){
                console.log(vm);
                console.log(this);
            },
            showTip:function(){
                alert("showTip");
            },
            printMain(){
                console.log("printMain");
                this.printFunA();
                this.printFunB();
            },
            printFunA(){
                console.log("printFunA");
            },
            printFunB(){
                console.log("printFunB");
            },
            printArg(){
                console.log("传入的形参：",arguments);
            }
        }

    })
</script>

</html>